<template>
  <div class="breadcrumb">
    <Breadcrumb :aaa="aaa" :msgg="msg" :txt="txt" :path1="path1" />
  </div>
  <div class="con_container">
    <div class="search">
      <div class="search_top">
        <span> 筛选搜索</span>
        <span>
          <el-button>重置</el-button>
          <el-button type="primary" @click="onSearch">查询搜索</el-button>
        </span>
      </div>
      <div class="ipt_box">
        <el-form label-width="100px">
          <el-form-item label="品牌名称：">
            <el-input
              type="text"
              placeholder="品牌名称"
              v-model="nickname"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-form label-width="100px">
          <el-form-item label="推荐状态">
            <el-cascader
              :options="options2"
              :show-all-levels="false"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="add_box">
      <span>数据列表</span>
      <el-button @click="getShopData">选择品牌</el-button>
    </div>
    <!-- 列表数据 -->
    <div class="table_list">
      <el-table :data="tableData.list" style="width: 100%" :border="true">
        <el-table-column type="selection" width="80" />
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="brandName" label="品牌名称" width="200" />
        <el-table-column label="是否推荐">
          <template #default="scope">
            <el-switch
              @click="
                changeRecommendStatus(scope.row.id, scope.row.recommendStatus)
              "
              :model-value="scope.row.recommendStatus === 1 ? true : false"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" />
        <!-- 自定义列模板 -->
        <el-table-column label="状态" width="147">
          <template #default="scope">
            <span>{{
              scope.row.recommendStatus === 1 ? "推荐中" : "未推荐"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" flex="right">
          <template #default="scope">
            <span class="spn1" @click="Fun1(scope.row.id)">设置排序</span>
            <span class="spn2" @click="delDataFun(scope.row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <div class="foot_box">
      <div style="display: flex; justify-content: space-between">
        <el-form label-width="100px">
          <el-cascader :options="dataList" :show-all-levels="false" clearable />
        </el-form>
        <el-button style="margin-left: 10px" type="primary">确认</el-button>
      </div>
      <el-pagination
        v-model:current-page="tableData.pageNum"
        v-model:page-size="tableData.pageSize"
        background
        :page-sizes="[1, 5, 10, 15]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 删除 -->
    <el-dialog v-model="dialogVisible" title="" width="30%">
      <span>确定要删除吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="delListData2" type="primary"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 排序设置-->
    <el-dialog v-model="showSortModule" title="设置排序" width="30%">
      <el-form-item label-width="50px">
        <span>排序：</span><el-input v-model="sort" autocomplete="off" />
      </el-form-item>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showSortModule = false">取消</el-button>
          <el-button type="primary" @click="showSortModuleFun">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 筛选弹框 -->
    <el-dialog v-model="showSelectModule" title="设置排序" width="30%">
      <el-table
        :data="tableDataSelect.list"
        @selection-change="Functi"
        style="width: 100%"
        :border="true"
      >
        <el-table-column type="selection" width="80" />
        <el-table-column prop="name" label="品牌名称" width="170" />
        <el-table-column label="是否推荐" width="180">
          <template #default="scope">
            <span>商品：</span>
            <span>评价：</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <template #footer>
        <span class="dialog-footer">
          <div class="foot_box">
            <el-pagination
              v-model:current-page="tableDataSelect.pageNum"
              v-model:page-size="tableDataSelect.pageSize"
              background
              layout="prev, pager, next"
              :total="tableDataSelect.total"
              @size-change="handleSizeChangeSelect"
              @current-change="handleCurrentChangeSelect"
            />
          </div>
        </span>
        <span>
          <el-button>取消</el-button>
          <el-button type="primary" @click="addSelectDataFun">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as api from "../../request/api";
import { ElMessageBox } from "element-plus";
import Breadcrumb from "../../components/breadcrumb.vue";
let msg = ref("品牌推荐");
let txt = ref("营销");
let path1 = ref("sms/flash");
let aaa = ref(0);
// 修改推荐状态
const changeRecommendStatus = (id: number, val: number) => {
  if (val === 1) {
    api.homebrand.HomeBrandUpdateRecommendStartApi({
      ids: id,
      recommendStatus: 0,
    });
    getProductList();
  } else if (val === 0) {
    api.homebrand.HomeBrandUpdateRecommendStartApi({
      ids: id,
      recommendStatus: 1,
    });
    getProductList();
  }
};

// 设置排序
let sort = ref(0);
let dataId = ref(0);
let showSortModule = ref(false);
const Fun1 = (myid: number) => {
  showSortModule.value = true;
  dataId.value = myid;
};
const showSortModuleFun = () => {
  api.homebrand.HomeBrandUpdateSortDataApi({
    id: dataId.value,
    sort: sort.value,
  });
  showSortModule.value = false;
  getProductList();
};
// 删除
let dialogVisible = ref(false);
let delId = ref(0);
let delDataFun = (myid: number) => {
  delId.value = myid;
  dialogVisible.value = true;
};
let delListData2 = () => {
  api.homebrand.HomeBrandDeleteDataApi({
    ids: delId.value,
  });
  getProductList();
  dialogVisible.value = false;
};

// 筛选品牌
let showSelectModule = ref(false);
let tableDataSelect = reactive({
  list: <any>[],
  pageNum: 1,
  pageSize: 5,
  total: 28,
  totalPage: 6,
  nickName: "",
});
const getShopData = () => {
  showSelectModule.value = true;
  getShopDataFun();
};
const getShopDataFun = () => {
  api.homebrand
    .brandListApi({
      pageNum: tableDataSelect.pageNum,
      pageSize: tableDataSelect.pageSize,
    })
    .then((res) => {
      tableDataSelect.list = res.list;
      tableDataSelect.total = res.total;
    });
};
const handleSizeChangeSelect = (val: number) => {
  tableDataSelect.pageSize = val;
  getShopDataFun();
};
const handleCurrentChangeSelect = (val: number) => {
  tableDataSelect.pageNum = val;
  getShopDataFun();
};
// 添加筛选的数据
let addSelectData = reactive([]);
let Functi = (val: any) => {
  addSelectData = val.map((item: any) => {
    console.log(item.id);
    return { id: item.id, name: item.name };
  });
  console.log(addSelectData);
};
let addSelectDataFun = () => {
  api.homebrand.homeBrandCreate(addSelectData);
  showSelectModule.value = false;
};
// 搜索请求
// 定义搜索数据
let nickname = ref("");
let onSearch = () => {
  if (nickname.value === "") {
    getProductList();
    console.log("请求所有数据");
    return;
  }
  console.log("请求搜索数据");
  api.homebrand
    .homeBrandApi({
      pageNum: tableData.pageNum,
      pageSize: tableData.pageSize,
      brandName: nickname.value,
    })
    .then((res) => {
      console.log(res);
      tableData.list = res.list;
      tableData.total = res.total;
    });
};
// 列表数据
let tableData = reactive({
  list: <any>[],
  pageNum: 1,
  pageSize: 5,
  total: 28,
  totalPage: 6,
  nickName: "",
});

// 获取所有商品数据的请求
let getProductList = () => {
  api.homebrand
    .homeBrandApi({
      pageNum: tableData.pageNum,
      pageSize: tableData.pageSize,
      brandName: nickname.value,
    })
    .then((res) => {
      console.log(res);
      tableData.list = res.list;
      tableData.total = res.total;
    });
};
getProductList();

// 推荐状态
let options2 = [
  {
    value: "a",
    label: "未推荐",
  },
  {
    value: "b",
    label: "推荐中",
  },
];
// 批量操作
const dataList = [
  {
    value: "one",
    label: "设为推荐",
  },
  {
    value: "two",
    label: "取消推荐",
  },
  {
    value: "three",
    label: "删除",
  },
];

let handleSizeChange = (val: number) => {
  // console.log(val);
  tableData.pageSize = val;
  getProductList();
};
// 改变当前页数
let handleCurrentChange = (val: number) => {
  // console.log(val);
  tableData.pageNum = val;
  getProductList();
};
</script>

<style lang="scss" scoped>
.search {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  background-color: #fff;
  .search_top {
    display: flex;
    justify-content: space-between;
  }
  .el-input {
    width: 200px;
  }
  .ipt_box {
    display: flex;
    flex-wrap: wrap;
  }
}
.add_box {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
  height: 20px;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}
img {
  height: 100px;
  width: 150px;
}
.table_list {
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.el-pagination {
  font-size: 12px;
  float: right;
}
.foot_box {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.spn1,
.spn2 {
  color: skyblue;
  padding: 5px;
  cursor: pointer;
}
//table表格
:deep .el-table .el-table__cell {
  text-align: center !important;
}
:deep .el-table thead {
  font-weight: bold !important;
}
.con_container {
  padding: 10px 20px !important;
  margin-top: 20px !important;
}
.el-input {
  width: 200px;
}
</style>
